<template>
  <div class="bac">
    <img src="../assets/home/subUnitOne.png" alt="" class="sub-unit One" @click="toastOne" />
    <img src="../assets/home/subUnitSec.png" alt="" class="sub-unit Sec" @click="toastSec" />
    <img src="../assets/home/subUnitThr.png" alt="" class="sub-unit Thr" @click="toastThr" />
    <img src="../assets/home/subUnitFou.png" alt="" class="sub-unit Fou" @click="toastFou" />
    <img v-if="language === 'zh'" src="../assets/home/start.png" class="sub-unit start" @click="start" alt="">
    <img v-else src="../assets/home/startEng.png" class="sub-unit startEng" @click="start" alt="">
  
    <a-select
    ref="select"
    v-model:value="language"
    size="small"
    @focus="focus"
    class="selectLang"
    >
      <a-select-option  value="zh"><span class="langOption">汉语</span></a-select-option>
      <a-select-option  value="eng"><span class="langOption">Eng</span></a-select-option>
    </a-select>
  </div>
</template>




<script setup lang="ts">
  import {ref, h} from 'vue'
  import { Modal } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const language = ref('zh')
  const toastOne = ():void => {
      Modal.success({
        title: () => 'sub-unit One',
        content: () => h('div', {}, [
          h('p', 'some messages...some messages...'),
        ]),
        onOk() {
          console.log('ok');
        },
        icon:() => h('span',{})
      });
  }
  const toastSec = ():void => {
      Modal.success({
        title: () => 'sub-unit Sec',
        content: () => h('div', {}, [
          h('p', 'some messages...some messages...'),
        ]),
        onOk() {
          console.log('ok');
        },
        icon:() => h('span',{})
      });
  }
  const toastThr = ():void => {
      Modal.success({
        title: () => 'sub-unit Thr',
        content: () => h('div', {}, [
          h('p', 'some messages...some messages...'),
        ]),
        onOk() {
          console.log('ok');
        },
        icon:() => h('span',{})
      });
  }
  const toastFou = ():void => {
      Modal.success({
        title: () => 'sub-unit Fou',
        content: () => h('div', {}, [
          h('p', 'some messages...some messages...'),
        ]),
        onOk() {
          console.log('ok');
        },
        icon:() => h('span',{})
      });
  }
  const start = () => {
    router.push('/start')
  }
</script>

<style lang="less" scoped>
    
    :deep(.ant-select *) {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .langOption {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .selectLang {
        position: fixed;
        margin: 10px 0 0 10px;
        left: 0;
    }
    .bac {
      background-image: url('../assets/home/bac.png');
      height: 100vh;
      width: 100vw;
      position: relative;
      overflow: hidden;
    }
    .sub-unit {
      cursor: pointer;
    }
    .sub-unit.One {
      position: absolute;
      width: 38.177083333333336vw;
      height: 38.177083333333336vw;
      right: -15.677083333333334vw;
      top: -30.185185185185187vh;
    }
    .sub-unit.Sec {
      position: absolute;
      width: 19.2390625vw;
      height: 17.499479166666667vw;
      left: -3.9583333333333335vw;
      bottom: -4.898148148148148vh;
    }
    .sub-unit.Thr {
      width: 48.815625vw;
      height: 15.403645833333334vw;
      position: absolute;
      left: 27.916666666666668vw;
      bottom: 23.51851851851852vh;
    }
    .sub-unit.Fou {
      width: 5.438020833333334vw;
      height: 5.678125vw;
      position: absolute;
      left: 8.489583333333334vw;
      top: 39.81481481481482vh;
    }
    .sub-unit.start {
      width: 20vw;
      height: 9.8vw;
      position: absolute;
      right: 4.338541666666667vw;
      bottom: 12vh;
    }
    .sub-unit.startEng {
      width: 33.4375vw;
      height: 8.177vw;
      position: absolute;
      right: 2vw;
      bottom: 12vh;
    }
</style>